<template>
  <a-modal
    style="margin: 0; padding: 0"
    :width="1100"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 新增供应商认证 </template>
    <div class="title-item">认证信息</div>
    <div>
      <a-form :model="form" layout="vertical" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="供应商编号：">
              <a-input v-model="form.number" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="供应商名称：">
              <a-input v-model="form.name" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="供应商等级：">
              <a-input v-model="form.supLevelName" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="需求提交人：">
              <a-input v-model="getUserName.name" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="认证需求提交时间：">
              <a-date-picker
                v-model="form.SubmissionTime"
                style="width: 200px"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="认证流程：">
              <div className="custom-radio-card-shadey">
                <div>
                  <a-space direction="vertical" fill>
                    <div style="display: flex">
                      <div
                        v-for="(element, index) in projectSelector"
                        :key="element.key"
                      >
                        <template v-if="index === 0">
                          <a-select
                            v-model="element.value"
                            :style="{ width: '120px' }"
                          >
                            <a-option
                              v-for="item in projectAuth"
                              :key="item.id"
                              :value="item.id"
                              >{{ item.name }}</a-option
                            >
                          </a-select>
                        </template>
                        <template v-else-if="index !== 0">
                          <a-space :size="2" style="margin-left: 10px">
                            <icon-plus />
                            <a-select
                              v-model="element.value"
                              style="width: 120px; margin-left: 10px"
                              allow-clear
                            >
                              <a-option
                                v-for="item in projectAuth"
                                :key="item.id"
                                :value="item.id"
                                >{{ item.name }}</a-option
                              >
                            </a-select>
                            <icon-delete
                              @click="delContent(index)"
                              :size="16"
                              :style="{
                                color: 'red',
                                marginLeft: '5px',
                              }"
                              class="icon"
                            />
                          </a-space>
                        </template>
                      </div>
                      <div>
                        <a-button
                          style="margin-left: 10px"
                          type="text"
                          @click="addContent()"
                        >
                          <template #icon>
                            <icon-plus />
                          </template>
                          添加项目
                        </a-button>
                      </div>
                    </div>
                  </a-space></div
                >
              </div>
              <div> </div>
            </a-form-item>
          </a-col> </a-row></a-form
    ></div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, watch } from 'vue';
  import { cloneDeep, filter } from 'lodash';
  import dayjs from 'dayjs';
  import {
    getSupplierauth,
    getSupplierList,
  } from '@/api/buy-management/supplier-management/base-setting/index';
  import { GetSupplierPrimaryDetail } from '@/api/buy-management/supplier-management/supplier-primary-list/index';

  const props = withDefaults(
    defineProps<{
      supplierid: any;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  const getUserName = JSON.parse(sessionStorage.getItem('loginInfo'));

  let form = ref({
    name: '',
    number: '',
    supLevelName: '',
    state: '',
    SubmissionTime: '',
    User: '',
    aunt: '',
    auntType: '',
  });

  const emit = defineEmits(['update:visible', 'addProject']);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const auntData = ref();

  // let form = ref(cloneDeep(props.formData));

  //   获取流程数据
  const projectAuth = ref();
  const flowAuth = ref();
  const authData = async () => {
    const res = await getSupplierauth();
    flowAuth.value = res.flowAuth;
    projectAuth.value = res.projectAuth;
  };
  authData();

  const projectSelector = ref([{ key: '0', value: '' }]);
  const num = ref(0);

  const addContent = () => {
    projectSelector.value.push({ key: `${(num.value += 1)}`, value: '' });
  };
  const delContent = (index) => {
    projectSelector.value.splice(index, 1);
  };

  const SupplierList = async () => {
    const res = await GetSupplierPrimaryDetail({ id: props.supplierid });
    form.value = res;
    form.value.SubmissionTime = new Date().toJSON();
  };

  const NewSupplierData = ref();

  const stateData = ref([
    { key: 1, name: '初选供应商' },
    { key: 3, name: '认证供应商' },
    { key: 5, name: '合格供应商' },
  ]);

  // const SupplierDataCge = (val) => {
  //   let stateName = ref();
  //   NewSupplierData.value = SupplierData.value.filter((i) => i.id === val);
  //   form.value = NewSupplierData.value[0];
  //   stateName.value = stateData.value.filter((i) => i.key === form.value.state);
  //   form.value.state = stateName.value[0];
  // };

  const rules = reactive({});

  const checkedAutn = (key) => {
    form.value.auntType = key;
  };

  // 确定
  const center = ref();
  const handleOk = async () => {
    let date = ref(new Date().toJSON());
    let ccc = ref([]);
    projectSelector.value.forEach((i) => {
      ccc.value.push(i.value);
    });
    center.value = ccc.value.join('-');
    form.value.User = getUserName.id;
    emit('addProject', form.value, date.value, center.value, getUserName.id, 1);
  };

  watch(
    () => props.visible,
    () => {
      SupplierList();
    }
  );

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less">
  .title-item {
    width: 100%;
    height: 60px;
    line-height: 60px;
  }

  .custom-radio-card {
    padding: 10px 16px;
    border: 1px solid var(--color-border-2);
    border-radius: 4px;
    margin: 0;
    padding: 0;
    height: 100px;
    display: flex;
  }

  .custom-radio-card-masky {
    height: 17px;
    width: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
    margin-left: 30%;
  }

  .custom-radio-card-maskn {
    height: 17px;
    width: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
    margin-left: 30%;
  }

  .custom-radio-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
  }

  .custom-radio-card-title {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .custom-radio-card-shade {
    width: 45px;
    height: 98px;
    border-right: 1px solid var(--color-border-2);
    background-color: white;
    box-sizing: border-box;
  }

  .custom-radio-card-shadey {
    padding: 10px;
    width: 100%;
    height: 100%;
    background-color: white;
    box-sizing: border-box;
  }

  .custom-radio-card-shaden {
    padding: 10px;
    width: 100%;
    height: 100%;
    background-color: white;
    box-sizing: border-box;
  }

  .custom-radio-card-checked .custom-radio-card-masky {
    border-color: rgb(49, 194, 124);
  }

  .custom-radio-card-checked .custom-radio-card-maskn {
    border-color: rgb(255, 153, 0);
  }

  .custom-radio-card-checked .custom-radio-card-shadey {
    // background-color: var(--color-primary-light-1);
    border-color: rgb(49, 194, 124);
  }
  .custom-radio-card-checked .custom-radio-card-shaden {
    // background-color: var(--color-primary-light-1);
    border-color: rgb(255, 153, 0);
  }

  .custom-radio-card:hover .custom-radio-card-title,
  .custom-radio-card-checked .custom-radio-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked .custom-radio-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
  //   ::v-deep .arco-modal-body {
  //     padding: 0;
  //   }

  // :deep()
</style>
